<template>
	<view class="fullScreenList">
		<view class="listBox">
			<view class="listItem" v-for="(item,index) in dataList" :key="index" @click="cardItemEvent(item.type, item.id)">
				<view class="left">
					<image :src="item.img" mode="heightFix"></image>
					<view class="shadow" v-if="showShadow"></view>
					<view class="album-hg" v-if="showAlbum">
						<image src="/static/images/hg-t.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="right">
					<text>{{item.title}}</text>
					<text>{{item.subTitle}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataList: Array,
			showShadow: {
				type: Boolean,
				default: false
			},
			showAlbum: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				typeList: [{
					type: 'listenTop',
					name: '听歌排行',
					url: '../../../listenTop/listenTop'
				},{
					type: 'likeMusic',
					name: '我喜欢的音乐',
					url: '../../../listenTop/listenTop'
				},{
					type: 'songList',
					name: '歌单',
					url: '/pages/music/songList/songListDetail'
				}]
			}
		},
		methods: {
			// 卡片项点击事件
			cardItemEvent(type, id) {
				console.log(id)
				let url = `${this.typeList.find(item => item.type == type).url}?id=${id}`
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fullScreenList {
		width: 750rpx;
		padding: 0 30rpx;
		background-color: #fff;
		.listBox {
			width: 100%;
			.listItem {
				display: flex;
				align-items: center;
				// margin: 15rpx 0;
				width: 100%;
				height: 120rpx;
				.left {
					position: relative;
					display: flex;
					align-items: center;
					// width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					z-index: 20;
					image {
						// width: 90rpx;
						height: 100rpx;
						border-radius: 10rpx;
						z-index: 20;
					}
					.shadow {
						position: absolute;
						top: -5rpx;
						left: 10rpx;
						width: 70rpx;
						height: 10rpx;
						background-color: rgba(242,242,242,.9);
						border-top-left-radius: 10rpx;
						border-top-right-radius: 10rpx;
						z-index: 11;
					}
					.album-hg {
						position: absolute;
						top: -10rpx;
						left: 15rpx;
						width: 90rpx;
						height: 10rpx;
						z-index: 11;
						image {
							position: absolute;
							top: 0;
							width: 70rpx;
							z-index: 11;
						}
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					// width: 570rpx;
					height: 100rpx;
					padding: 0 15rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text {
						margin: 5rpx;
						display: block;
						&:first-child {
							font-size: 29rpx;
							font-weight: 600;
							color: #000;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						&:last-child {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: #666;
							font-size: 22rpx;
						}
					}
				}
			}
		}
	}
</style>
